<template>
	<view class="content">
		<image src="/static/walk_while_listening/27a3418e1d0c7b97827e0a2814b5a2b.jpg" mode="widthFix" class="bg-img">
		</image>
		<view class="list-block">
			<view v-for="(item,index) in list" :key="item.id" class="list-item">
				<audio controls :src="item.mp3url" :name="item.title" :id="item.id" :poster="item.picUrl"
					@click="audioPlay" @play='tabActive=item.id' :class="tabActive==item.id?'list-audio':''"></audio>
				<image src="" :class="tabActive==item.id?'active-img':''" class="dynamic-img">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postLisAndGoList
	} from '@/api/walk_while_listening.js';
	export default {
		data() {
			return {
				list: [],
				tabActive: 0
			}
		},
		methods: {
			audioPlay: function(even) {
				// 停止上一个音频的播放
				if (this.audioContext) {
					this.audioContext.pause()
				}
				this.audioContext = wx.createAudioContext(even.currentTarget.id, this)
				this.audioContext.play();
			},

			findList() {
				postLisAndGoList({
					page: 1,
					limit: 20
				}).then((res) => {
					if (res.code == 1) {
						if (res.data != null) {
							console.log(res)
							this.list = res.data;
						}
					} else {
						console.log(res)
					}
				}).catch((res) => {
					console.log(res)
				})
			}
		},
		onShow() {
			this.findList();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f4f4f4;


		.bg-img {
			width: 100%;
			margin-top: -5rpx;
			position: absolute;
		}

		.list-block {
			width: calc(100% - 40rpx);
			position: relative;
			background: #fff;
			border-radius: 25rpx;
			padding: 30rpx;
			top: 250rpx;
			margin: 0 20rpx;

			.list-item {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: center;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.dynamic-img {
					width: 50rpx;
					height: 50rpx;
					margin-top: 60rpx;
					margin-left: -80rpx;
				}

				.active-img {
					width: 50rpx;
					height: 50rpx;
					margin-top: 60rpx;
					margin-left: -80rpx;
					content: url('@/static/walk_while_listening/f31a58240fead33bbebff133070916a2.gif');
				}


				.list-audio {
					border: #0066FF solid 2rpx;
				}
			}
		}
	}
</style>
